<template>
  <ul id="model-list" class="overflow-x-auto whitespace-nowrap flex h34 gap-2.4 pt-4">
    <ModelCard
      v-for="(item,i) in list"
      :key="item.model_code"
      :data="item"
      :closable="closable"
      :id="`model-card-${item.category_code}`"
      @click="onTapCard?.(item,i)"
      :on-delete="onDelete"
    />
    <PlusBtn v-if="plus" @click="onTapCard?.('plus')" />
  </ul>
</template>

<script setup lang="ts">
import type { Model } from '@/service/types'
import ModelCard from '@/components/ModelCard.vue'
import PlusBtn from '@/views/create/components/PlusBtn.vue'
import type { CardType } from '@/typing';

defineProps<{
  list: Model[]
  closable?: boolean
  plus?: boolean
  onTapCard?: (card: CardType,index?:number) => void
  onDelete?:(model:Model)=>void
}>()
</script>

<style scoped></style>
